<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'ICE':sysName}}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="updateUser">修改密码</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
			<el-dialog title="修改密码" :visible.sync="currentUserFormVisible" :close-on-click-modal="false" width="30%">
				<el-form :model="currentUserForm" label-width="100px" :rules="currentUserFormRule" ref="currentUserForm">
					<el-row>
					<el-col :span="20">
					<el-form-item label="新密码" prop="pwd" >
						<el-input type="password" v-model="currentUserForm.pwd" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPwd" >
							<el-input type="password" v-model="currentUserForm.checkPwd" auto-complete="off"></el-input>
					</el-form-item>
					</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="currentUserFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="updatePwdSubmit" :loading="currentUserFormLoading">提交</el-button>
				</div>
			</el-dialog>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo"unique-opened router background-color="transparent"  :collapse="collapsed">
						<el-submenu :index="index+''" v-for="(item,index) in $store.state.app.menuList">
							<template slot="title"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></template>
							<el-menu-item-group>
								<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
				</el-menu>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
    import {sendMsg, updatePwd} from '../api/api';
    import {getStore, setStore} from '../common/js/storage';
    import Cookies from 'js-cookie';

    export default {
		data() {
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.currentUserForm.checkPwd !== '') {
                        this.$refs.currentUserForm.validateField('checkPwd');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.currentUserForm.pwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
			return {
				sysName:'智芯云',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
                updatePwdAllow:false,
                updatePwdCode:"发送验证码",
                currentUserFormVisible:false,
                currentUserFormLoading:false,
                currentUserForm: {
                    pwd:'',
                    checkPwd:''
				},
                currentUserFormRule:{
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPwd: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                    ]
				}
			}
		},
		methods: {
            updatePwdSubmit:function(){
                this.$refs.currentUserForm.validate((valid) => {
                    if (valid){
                        this.$confirm('确认修改密码吗？', '提示', {}).then(() => {
                            //获取当前用户的参数信息
                            let user = getStore('userInfo');
                            user = JSON.parse(user);
                            let para = {
                                userId:user.id,
                                pwd:this.currentUserForm.pwd,
                            }
                            this.currentUserFormLoading = true;
                            updatePwd(para).then(data=>{
                                if (data.code == 200){
                                    this.$message({
                                        message: '密码修改成功',
                                        type: 'success'
                                    });
                                }
                                this.currentUserFormLoading = false;
                            })
                        });
                    }
                })

			},
            sendUpdateMsg:function(){
                //获取当前的手机号码
                let user = getStore('userInfo');
                let para = {
                    mobileNo:user.mobileNo
                };
                if (this.updatePwdAllow) return;
                sendMsg(para).then((data)=>{
                    if (data.code == 200){
                        this.$message({
                            message: '验证码已经成功发送到'+user.mobileNo,
                            type: 'success'
                        });
                        this.preventUpdateSubmit(true)
                    } else {
                        this.$message({
                            message: '发送失败',
                            type: 'error'
                        });
                    }
                    this.updatePwdAllow = false
                })
            },
            preventUpdateSubmit (code) {
                let i = 60
                var setTime = setInterval(() => {
                    i--;
                    if (i === 0) {
                        clearInterval(setTime);
                        if (code) {
                            // 手机验证码
                            this.updatePwdAllow = true;
                            this.updatePwdCode = '发送验证码'
                        }
                    } else {
                        if (code) {
                            this.updatePwdCode = `${i}秒后重试`
                        }
                    }
                }, 1000)
            },
		    //更新当前登录用户的信息
            updateUser:function(){
				this.currentUserFormVisible = true;
			},
			//退出登录
			logout: function () {
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
                    Cookies.set('userInfo', '');
                    setStore('accessToken', '');
                    setStore("userInfo", '');
                    this.$router.push('/login');
				}).catch(() => {

				});


			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			}
		},
		mounted() {
			var user = getStore('userInfo');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.userName || '';
				this.sysUserAvatar = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3897107930,3785938129&fm=26&gp=0.jpg';
			}
		}
	}

</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#545c64;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				color: #545c64;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:65px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: transparent;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
